Next.js 14 Servera Darbības: Formu apstrādes labākās prakses apgūšana

Next.js 14 ievieš jaudīgas funkcijas, lai veidotu veiktspējīgas un lietotājam draudzīgas tīmekļa lietotnes. Starp tām Servera Darbības (Server Actions) izceļas kā transformējošs veids, kā apstrādāt formu iesniegšanu un datu mutācijas tieši serverī. Šī rokasgrāmata sniedz visaptverošu pārskatu par Servera Darbībām Next.js 14, koncentrējoties uz labākajām praksēm formu apstrādē, datu validācijā, drošībā un progresīvām tehnikām. Mēs izpētīsim praktiskus piemērus un sniegsim noderīgus ieskatus, lai palīdzētu jums veidot robustas un mērogojamas tīmekļa lietotnes.

Kas ir Next.js Servera Darbības?

Servera Darbības ir asinhronas funkcijas, kas darbojas serverī un var tikt izsauktas tieši no React komponentēm. Tās novērš nepieciešamību pēc tradicionāliem API maršrutiem formu iesniegšanas un datu mutāciju apstrādei, tādējādi vienkāršojot kodu, uzlabojot drošību un veiktspēju. Servera Darbības ir React Servera Komponentes (RSCs), kas nozīmē, ka tās tiek izpildītas serverī, nodrošinot ātrāku sākotnējo lapas ielādi un uzlabotu SEO.

Galvenās Servera Darbību priekšrocības:

Vienkāršots kods: Samaziniet koda apjomu, novēršot nepieciešamību pēc atsevišķiem API maršrutiem.
Uzlabota drošība: Servera puses izpilde samazina klienta puses ievainojamības.
Uzlabota veiktspēja: Izpildiet datu mutācijas tieši serverī, lai nodrošinātu ātrāku atbildes laiku.
Optimizēts SEO: Izmantojiet servera puses renderēšanu labākai meklētājprogrammu indeksācijai.
Tipu drošība: Gūstiet labumu no pilnīgas tipu drošības, izmantojot TypeScript.

Sava Next.js 14 projekta iestatīšana

Pirms iedziļināties Servera Darbībās, pārliecinieties, ka jums ir iestatīts Next.js 14 projekts. Ja sākat no nulles, izveidojiet jaunu projektu, izmantojot šādu komandu:

npx create-next-app@latest my-next-app

Pārliecinieties, ka jūsu projekts izmanto app direktoriju struktūru, lai pilnībā izmantotu Servera Komponentes un Darbības.

Pamata formu apstrāde ar Servera Darbībām

Sāksim ar vienkāršu piemēru: forma, kas iesniedz datus, lai izveidotu jaunu vienumu datu bāzē. Mēs izmantosim vienkāršu formu ar ievades lauku un iesniegšanas pogu.

Piemērs: Jauna vienuma izveide

Vispirms definējiet Servera Darbības funkciju savā React komponentē. Šī funkcija apstrādās formas iesniegšanas loģiku serverī.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simulēt datu bāzes mijiedarbību
  console.log('Veido vienumu:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  console.log('Vienums veiksmīgi izveidots!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    
      Vienuma nosaukums:
      
      
    
  );
}

Paskaidrojums:

Direktīva 'use client' norāda, ka šis ir klienta komponents.
Funkcija createItem ir atzīmēta ar direktīvu 'use server', norādot, ka tā ir Servera Darbība.
Funkcija handleSubmit ir klienta puses funkcija, kas izsauc servera darbību. Tā arī apstrādā UI stāvokli, piemēram, pogas atspējošanu iesniegšanas laikā.
Elementa <form> rekvizīts action ir iestatīts uz funkciju handleSubmit.
Metode formData.get('name') iegūst ievades lauka 'name' vērtību.
await new Promise simulē datu bāzes operāciju un pievieno latentumu.

Datu Validācija

Datu validācija ir izšķiroša, lai nodrošinātu datu integritāti un novērstu drošības ievainojamības. Servera Darbības sniedz lielisku iespēju veikt servera puses validāciju. Šī pieeja palīdz mazināt riskus, kas saistīti tikai ar klienta puses validāciju.

Piemērs: Ievades datu validēšana

Modificējiet Servera Darbību createItem, lai iekļautu validācijas loģiku.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error('Vienuma nosaukumam jābūt vismaz 3 rakstzīmes garam.');
  }

  // Simulēt datu bāzes mijiedarbību
  console.log('Veido vienumu:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  console.log('Vienums veiksmīgi izveidots!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Notika kļūda.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Vienuma nosaukums:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paskaidrojums:

Funkcija createItem tagad pārbauda, vai name ir derīgs (vismaz 3 rakstzīmes garš).
Ja validācija neizdodas, tiek izmesta kļūda.
Funkcija handleSubmit ir atjaunināta, lai noķertu jebkādas kļūdas, ko izmet Servera Darbība, un parādītu kļūdas ziņojumu lietotājam.

Validācijas bibliotēku izmantošana

Sarežģītākiem validācijas scenārijiem apsveriet iespēju izmantot validācijas bibliotēkas, piemēram:

Zod: TypeScript orientēta shēmu deklarēšanas un validācijas bibliotēka.
Yup: JavaScript shēmu veidotājs vērtību parsēšanai, validēšanai un transformēšanai.

Šeit ir piemērs, izmantojot Zod:

// app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'Vienuma nosaukumam jābūt vismaz 3 rakstzīmes garam.'),
});

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // Simulēt datu bāzes mijiedarbību
  console.log('Veido vienumu:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  console.log('Vienums veiksmīgi izveidots!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Notika kļūda.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Vienuma nosaukums:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paskaidrojums:

CreateItemSchema definē validācijas noteikumus laukam name, izmantojot Zod.
Metode safeParse mēģina validēt ievades datus. Ja validācija neizdodas, tā atgriež objektu ar kļūdām.
Objekts errors satur detalizētu informāciju par validācijas neveiksmēm.

Drošības apsvērumi

Servera Darbības uzlabo drošību, izpildot kodu serverī, taču joprojām ir svarīgi ievērot drošības labākās prakses, lai aizsargātu jūsu lietotni no biežākajiem draudiem.

Starpvietņu pieprasījumu viltošanas (CSRF) novēršana

CSRF uzbrukumi izmanto uzticību, kāda tīmekļa vietnei ir lietotāja pārlūkprogrammā. Lai novērstu CSRF uzbrukumus, ieviest CSRF aizsardzības mehānismus.

Next.js automātiski nodrošina CSRF aizsardzību, izmantojot Servera Darbības. Ietvars ģenerē un validē CSRF marķieri (token) katrai formas iesniegšanai, nodrošinot, ka pieprasījums nāk no jūsu lietotnes.

Lietotāju autentifikācijas un autorizācijas apstrāde

Nodrošiniet, ka tikai autorizēti lietotāji var veikt noteiktas darbības. Ieviesiet autentifikācijas un autorizācijas mehānismus, lai aizsargātu sensitīvus datus un funkcionalitāti.

Šeit ir piemērs, izmantojot NextAuth.js, lai aizsargātu Servera Darbību:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('Neautorizēts');
  }

  const name = formData.get('name') as string;

  // Simulēt datu bāzes mijiedarbību
  console.log('Veido vienumu:', name, 'lietotājs:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  console.log('Vienums veiksmīgi izveidots!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Notika kļūda.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Vienuma nosaukums:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paskaidrojums:

Funkcija getServerSession iegūst lietotāja sesijas informāciju.
Ja lietotājs nav autentificējies (nav sesijas), tiek izmesta kļūda, neļaujot Servera Darbībai izpildīties.

Ievades datu attīrīšana (Sanitizing)

Attīriet ievades datus, lai novērstu starpvietņu skriptēšanas (XSS) uzbrukumus. XSS uzbrukumi notiek, kad ļaunprātīgs kods tiek ievadīts tīmekļa vietnē, potenciāli apdraudot lietotāja datus vai lietotnes funkcionalitāti.

Izmantojiet bibliotēkas, piemēram, DOMPurify vai sanitize-html, lai attīrītu lietotāja sniegtos ievades datus, pirms tos apstrādājat savās Servera Darbībās.

Progresīvas tehnikas

Tagad, kad esam apskatījuši pamatus, izpētīsim dažas progresīvas tehnikas efektīvai Servera Darbību izmantošanai.

Optimistiskie atjauninājumi

Optimistiskie atjauninājumi nodrošina labāku lietotāja pieredzi, nekavējoties atjauninot lietotāja saskarni (UI) tā, it kā darbība būtu veiksmīga, pat pirms serveris to apstiprina. Ja darbība serverī neizdodas, UI tiek atgriezts iepriekšējā stāvoklī.

// app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simulēt datu bāzes mijiedarbību
  console.log('Atjaunina vienumu:', id, 'ar nosaukumu:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  // Simulēt neveiksmi (demonstrācijas nolūkos)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('Neizdevās atjaunināt vienumu.');
  }

  console.log('Vienums veiksmīgi atjaunināts!');
  return { name }; // Atgriezt atjaunināto nosaukumu
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // Optimistiski atjaunināt UI
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // Ja veiksmīgi, atjauninājums jau ir redzams UI, pateicoties setItemName

    } catch (error: any) {
      setErrorMessage(error.message || 'Notika kļūda.');
      // Kļūdas gadījumā atgriezt UI sākotnējā stāvoklī
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Pašreizējais nosaukums: {itemName}
      
        Jaunais vienuma nosaukums:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paskaidrojums:

Pirms Servera Darbības izsaukšanas, UI tiek nekavējoties atjaunināts ar jauno vienuma nosaukumu, izmantojot setItemName.
Ja Servera Darbība neizdodas, UI tiek atgriezts sākotnējā vienuma nosaukumā.

Datu atkārtota validēšana (Revalidating)

Pēc tam, kad Servera Darbība ir modificējusi datus, jums var būt nepieciešams atkārtoti validēt kešototus datus, lai nodrošinātu, ka UI atspoguļo jaunākās izmaiņas. Next.js nodrošina vairākus veidus, kā atkārtoti validēt datus:

Revalidate Path: Atkārtoti validēt kešatmiņu noteiktam ceļam (path).
Revalidate Tag: Atkārtoti validēt kešatmiņu datiem, kas saistīti ar noteiktu tagu.

Šeit ir piemērs ceļa atkārtotai validēšanai pēc jauna vienuma izveides:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simulēt datu bāzes mijiedarbību
  console.log('Veido vienumu:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulēt latentumu

  console.log('Vienums veiksmīgi izveidots!');

  revalidatePath('/items'); // Atkārtoti validēt /items ceļu
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Notika kļūda.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Vienuma nosaukums:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paskaidrojums:

Funkcija revalidatePath('/items') padara nederīgu kešatmiņu ceļam /items, nodrošinot, ka nākamais pieprasījums uz šo ceļu saņems jaunākos datus.

Servera Darbību labākās prakses

Lai maksimāli izmantotu Servera Darbību priekšrocības, ievērojiet šādas labākās prakses:

Uzturiet Servera Darbības mazas un fokusētas: Servera Darbībām jāveic viens, labi definēts uzdevums. Izvairieties no sarežģītas loģikas Servera Darbībās, lai saglabātu lasāmību un testējamību.
Lietojiet aprakstošus nosaukumus: Piešķiriet savām Servera Darbībām aprakstošus nosaukumus, kas skaidri norāda to mērķi.
Apstrādājiet kļūdas eleganti: Ieviesiet robustu kļūdu apstrādi, lai sniegtu informatīvu atgriezenisko saiti lietotājam un novērstu lietotnes avārijas.
Rūpīgi validējiet datus: Veiciet visaptverošu datu validāciju, lai nodrošinātu datu integritāti un novērstu drošības ievainojamības.
Nodrošiniet savas Servera Darbības: Ieviesiet autentifikācijas un autorizācijas mehānismus, lai aizsargātu sensitīvus datus un funkcionalitāti.
Optimizējiet veiktspēju: Pārraugiet savu Servera Darbību veiktspēju un optimizējiet tās pēc nepieciešamības, lai nodrošinātu ātrus atbildes laikus.
Efektīvi izmantojiet kešatmiņu: Izmantojiet Next.js kešatmiņas mehānismus, lai uzlabotu veiktspēju un samazinātu datu bāzes slodzi.

Biežākās kļūdas un kā no tām izvairīties

Lai gan Servera Darbības piedāvā daudzas priekšrocības, ir dažas bieži sastopamas kļūdas, no kurām jāuzmanās:

Pārāk sarežģītas Servera Darbības: Izvairieties no pārāk daudz loģikas ievietošanas vienā Servera Darbībā. Sadaliet sarežģītus uzdevumus mazākās, vieglāk pārvaldāmās funkcijās.
Kļūdu apstrādes ignorēšana: Vienmēr iekļaujiet kļūdu apstrādi, lai noķertu neparedzētas kļūdas un sniegtu noderīgu atgriezenisko saiti lietotājam.
Drošības labāko prakšu ignorēšana: Ievērojiet drošības labākās prakses, lai aizsargātu savu lietotni no biežākajiem draudiem, piemēram, XSS un CSRF.
Aizmirstot atkārtoti validēt datus: Pārliecinieties, ka pēc Servera Darbības datu modificēšanas atkārtoti validējat kešotos datus, lai UI būtu aktuāls.

Noslēgums

Next.js 14 Servera Darbības nodrošina jaudīgu un efektīvu veidu, kā apstrādāt formu iesniegšanu un datu mutācijas tieši serverī. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat veidot robustas, drošas un veiktspējīgas tīmekļa lietotnes. Izmantojiet Servera Darbības, lai vienkāršotu savu kodu, uzlabotu drošību un vispārējo lietotāja pieredzi. Integrējot šos principus, apsveriet savu izstrādes lēmumu globālo ietekmi. Pārliecinieties, ka jūsu formas un datu apstrādes procesi ir pieejami, droši un lietotājam draudzīgi dažādām starptautiskām auditorijām. Šī apņemšanās veicināt iekļautību ne tikai uzlabos jūsu lietotnes lietojamību, bet arī paplašinās tās sasniedzamību un efektivitāti globālā mērogā.